<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         .all {
            width: 1200px;
            height: 100%;
            margin-left: 200px;
        }
        .head {
            width: 400px;
            height: 80px;
        }
        .image {
            display: inline-block;
            width: 150px;
            height: 60px;
            float: left;
        }
        .yhzc {
            display: inline-block;
            height: 60px;
            line-height: 60px;
            font-size: 20px;
            color: #6d6f6d;
            float: left;
            margin-left: 10px;
        }
       
        /* 主体 */
        .main {
            width: 350px;
            height: 300px;
            margin: auto;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin-top: 100px;
        }
        .hm {
            float: left;
            height: 30px;
            text-align: center;
            line-height: 30px;
        }
        .choice {
            float: left;
            margin-left: 10px;
            border: 1px solid #dbdbdb;
        }

        .choice select {
            display: inline-block;
            font-size: 10px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border: 0px;
        }
        .phone {
            height: 30px;
            line-height: 30px;
            float: left;
            border: 1px solid#dbdbdb;
        }

        .phone input {
            display: inline-block;
            height: 25px;
            line-height: 25px;
            border: 0px;
            outline: none;
        }
        .yzm{
            float: left;
            height: 30px;
            text-align: center;
            line-height: 30px;
        }
        .wk{
            width: 80px;
            float: left;
            height: 30px;
            text-align: center;
            line-height: 30px;
            color: #ff7637;
            font-size: 10px;
            border:1px solid #dbdbdb;
            border-left: 0px;
        }
        .hqyzm{
            display: inline-block;
            width: 80px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            color: #ff7637;
            font-size: 10px;
            outline: none;
            border:0px;
            border-right: 0px;
            border-left: 0px;
            background-color: white;
        }
        .botton{
            margin-top: 40px;
            width: 270px;
            height: 40px;
            background-image:linear-gradient(to right,#ffc580,#ffa880) ;
            margin-left: 75px;
            border-radius: 5px;
            text-align: center;
            line-height: 40px;
            color: #fffefd;
        }
        .agreement{
            margin-top: 20px;
            width: 270px;
            height: 40px;
            margin-left: 75px;
            font-size: 5px;
            color:#aeaeae;
        }
        .agreement p{
            font-size: 5px;
            color: #ff6620;
            margin: 0px;
            display: inline-block;
        }
        .agreement p1{
            width: 5px;
            display: inline-block;
            line-height: 20px;
        }
        .change{
            text-align: right;
            margin-top: 40px;
        }
        .change a{
            display: inline-block;
            color: #ff6620;
            height: 20px;
            line-height: 20px;
            font-size: 10px;
            text-decoration:none;
        }
        .bottom{
            margin-top: 30px;
            border: solid 2px #ebebeb;
            border-left: 0px;
            border-right: 0px;
            height: 30px;
            width: 100%;
        }
        .bottom span{
            margin-top: 5px;
            font-size: 10px;
            color: #848484;
            text-align: center;
            height: 20px;
            line-height: 20px;
            display: inline-block;
            border-right: 1px solid #ebebeb;
            float: left;
            padding-left: 15px;
            padding-right: 15px;
        }
        .foot{
            margin-top: 10px;
            font-size: 13px;
            color:#848484;
        }
        
        
    </style>
</head>
<body>
    <div class="all">
        <div class="head">
            <div class="image"><img src="淘宝.png" alt=""></div>
            <div class="yhzc">用户注册</div>
        </div>
        <div class="main">
            <div style="height: 30px;width: 500px;">
                <div class="hm">手机号码</div>
                <div class="choice">
                    <select name="" id="">
                        <option value="">中国大陆&nbsp;&nbsp;&nbsp;+86</option>
                        <option value="">中国台湾&nbsp;&nbsp;&nbsp;+886</option>
                        <option value="">中国香港&nbsp;&nbsp;&nbsp;+852</option>
                        <option value="">马来西亚&nbsp;&nbsp;&nbsp;+60</option>
                        <option value="">新加坡&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+65</option>
                        <option value="">日本&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+81</option>
                        <option value="">韩国&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+82</option>
                        <option value="">美国&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+1</option>
                    </select>
                </div>
                <div class="phone"><input type="text" placeholder="请输入你的手机号码"></div>
            </div>
                <div style="height: 30px;width: 500px;margin-top: 30px;">
                    <div class="yzm">验证码</div>
                    <div class="phone" style="margin-left: 25px;border-right: 0px;">
                        <input type="text" style="width: 190px;" placeholder="请输入校验码">
                    </div>
                    <div class="wk"><input onclick="sendmessage(this,60);" class="hqyzm" value="获取验证码" type="button"></div>
                </div>
                    <a href="" style="text-decoration: none;"><div class="botton">同意协议并注册</div></a>
                    <div class="agreement">
                        已阅读并同意以下协议<p>淘宝平台服务协议</p><p1>、</p1><p>隐私证权</p>
                        <p1>、</p1><p>法律声明</p><p1>、</p1><p>支付宝及客户端支付协议</p>
                    </div>
                    <div class="change"><a href="">切换至企业版</a></div>
        </div>
                    <div class="bottom">
                        <span>阿里巴巴集团</span>
                        <span>阿里巴巴国际站</span>
                        <span>阿里巴巴中国站</span>
                        <span>全球速卖通</span>
                        <span>淘宝网</span>
                        <span>天猫</span>
                        <span>聚划算</span>
                        <span>一淘</span>
                        <span>阿里妈妈</span>
                        <span>阿里云计算</span>
                        <span>云OS</span>
                        <span>万网</span>
                        <span>支付宝</span>
                    </div>
                    <div class="foot">
                        &nbsp;&nbsp;&nbsp;&nbsp;关于淘宝&nbsp;&nbsp;&nbsp;
                        合作伙伴&nbsp;&nbsp;&nbsp;营销中心&nbsp;&nbsp;&nbsp;
                        联系客服&nbsp;&nbsp;&nbsp;开放平台&nbsp;&nbsp;&nbsp;
                        诚征英才&nbsp;&nbsp;&nbsp;联系我们&nbsp;&nbsp;&nbsp;
                        网站地图&nbsp;&nbsp;&nbsp;法律声明及隐私权政策
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;©2021Taobao.com 版权所有<br>
                    </div>
                    <div class="foot">
                        &nbsp;&nbsp;&nbsp;&nbsp;网络文化经营许可证:&nbsp;&nbsp;&nbsp;&nbsp文网文[2010]040号&nbsp;&nbsp;│&nbsp;&nbsp;增值电信业务经营许可证:&nbsp;&nbsp;浙B2-20080224-1&nbsp;&nbsp;│&nbsp;&nbsp;信息网络传播视听节目许可证:&nbsp;&nbsp;1109364号
                    
                
                </div>
                </div>
                <script>
                    function sendmessage(obj,second){
                        var obj = document.querySelector('.hqyzm');
                       if(sendmessage){
                           countDown(obj,second)
                       }
                       else{
                           alter("错误")
                       }
                   }
                   function countDown(obj,second){
                       if(second>=0){
                           if(typeof buttonDefaultValue==='undefined'){
                               buttonDefaultValue='请稍等';
                           }
                       obj.disabled=true;
                       obj.value=buttonDefaultValue+'('+second+')';
                       second--;
                       setTimeout(function(){
                           countDown(obj,second);
                       },1000);
                   }else{
                       obj.disabled=false;
                       obj.value='获取验证码';
                       }
                   }
               </script>
                   
            
</body>
</html>